<template>
    		<section class="todoapp">
			<header class="header">
				<h1>todos</h1>
				<input v-model.trim="content" @keyup.enter="addData()" class="new-todo" placeholder="What needs to be done?" autofocus>
			</header>
			<!-- This section should be hidden by default and shown when there are todos -->
			<section class="main" v-show="todoList.length ">
				<input id="toggle-all" class="toggle-all" type="checkbox">
				<label for="toggle-all">Mark all as complete</label>
				<ul class="todo-list">
					<!-- These are here just to show the structure of the list items -->
					<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
					<li :class="{ 'completed':item.completed}" v-for="item in todoList">
						<div class="view">
							<input class="toggle" type="checkbox" v-model="item.completed">
							<label>{{item.content}}</label>
							<button class="destroy"></button>
						</div>
						<input class="edit" value="Create a TodoMVC template">
					</li>
				</ul>
			</section>
			<!-- This footer should be hidden by default and shown when there are todos -->
			<footer class="footer" v-show="todoList.length ">
				<!-- This should be `0 items left` by default -->
				<span class="todo-count"><strong>0</strong> item left</span>
				<!-- Remove this if you don't implement routing -->
				<ul class="filters">
					<li>
						<a class="selected" href="#/">All</a>
					</li>
					<li>
						<a href="#/active">Active</a>
					</li>
					<li>
						<a href="#/completed">Completed</a>
					</li>
				</ul>
				<!-- Hidden if no completed items are left ↓ -->
				<button class="clear-completed">Clear completed</button>
			</footer>
		</section>
		<footer class="info">
			<p>Double-click to edit a todo</p>
			<!-- Remove the below line ↓ -->
			<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
			<!-- Change this out with your name and url ↓ -->
			<p>Created by <a href="http://todomvc.com">you</a></p>
			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
		</footer>
</template>
<script setup lang="ts">
import { reactive, ref, toRefs } from 'vue';

interface TodoItem{
	id: number;
	content: String;
	completed: boolean;
}

interface Data{
	todoList: Array<TodoItem>
	content:String
}

//构建数据
let data:Data = reactive({
	todoList: [
		    // {id: 1, content: '任务1', completed: true},
    		// {id: 2, content: '任务2', completed: false},
    		// {id: 3, content: '任务3', completed: false}
	],
	content: ''
})
//解构对象
let { todoList,content } = {... toRefs(data) }

//添加数据
function addData(){
	//判断是否为空
	if(content.value.trim()){
		todoList.value.push({
			id: new Date().getTime(),
			content: content.value,
			completed: false
		})
		content.value = ''
	}
}


</script>
<style>

</style>